<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid red; width: 240px;
        }
        input{
            display: inline-block; width: 55px;height: 26px;margin-top: 5px;font-weight: 600;font-size: 1.2em;
        }
        #div1{
            margin: 0 auto;
        }
        *{
            font-size: 14px;
        }
    </style>
</head>
<body>
      

    <div id="div1">
        <div id="div2"><textarea name="" id="view" cols="30" rows="10" readonly></textarea></div>
        <div id="div3">
            <input type="button" value="7">
            <input type="button" value="8">
            <input type="button" value="9">
            <input type="button" value="+">
            <br>
            <input type="button" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <input type="button" value="-">
            <br>
            <input type="button" value="1">
            <input type="button" value="2">
            <input type="button" value="3">
            <input type="button" value="*">
            <br>
            <input type="button" value="0">
            <input type="button" value=".">
            <input type="button" value="=">
            <input type="button" value="/">
        </div>
    </div>
    <script>
        let btes=document.getElementsByTagName("input");
        let num1=num2=0;op='';
        let view=document.getElementById("view");
        view.value='';
        for(let btn of btes){
            btn.onclick=function(e){
               let val=e.target.value;
               if(val=="="){
                num2=Number(view.value);
                switch(op){
                    case "+":
                        view.value=num1+num2;
                        break;
                    case "-":
                        view.value=num1-num2;
                        break;
                    case "*":
                        view.value=num1*num2;
                        break;
                    case "/":
                        view.value=num1/num2;
                        break;
                }
            }else if(val=="+"||val=="-"||val=="*"||val=="/"){
                num1=Number(view.value);
                view.value='';
                op=val;
               }else{
                if(val=="0"){
                    if(Number(view.value)!=0){
                        view.value=view.value+val;
                    }
                }else if(val=="."){
                    if((view.value).indexOf(".")==-1){
                        view.value=view.value+val;
                    }else if(view.value==null||view.value==""){
                        view.value=0+val;
                    }
                }else{
                    view.value=view.value+val;
                }
               }
            }
        }

    </script>
</body>
</html>